<template>
	        <ls-page page-class="z-overspread-page" class="page" title=""  :default-bg="false">
	            <view class="top-meng"></view>
	
	            <view class="centerStore-container">
	                <view class="centerStore-container-hadd2" v-if="themetype == '001'">{{ address }}</view>
	                <view class="centerStore-container-h1" v-if="themetype == '002'">{{ address }}</view>
	                <swiper style="height: 356rpx; margin: 20rpx 0rpx 0 0rpx" previous-margin="20rpx" next-margin="20rpx" @change="cardChange">
	                    <swiper-item v-for="(v, k) in cardList"  :key="k">
	                        <view
	                            class="centerStore-container-card"
	                          :style="{ backgroundImage: 'url(' + v.backgroundAtt2 + ')' }"
	                        >
	                            <view class="card-upper">
	                                <!-- <view class="card-uppe-item">{{v.carName}}</view> -->
	                                <view class="card-uppe-item">{{v.carName}}</view>
	                            </view>
	                            <!-- <view class="{{ v.cardType == '1' ? 'card-img':'card-img1'}}"></view> -->
	                            <!-- class="{{cardIndex == index?'act' : 'cardItem'}}" -->
	                            <view class="card-center">
	                                <view class="card-center-item">
	                                    <view class="center-item-value">{{v.currentAmtAct}}</view>
	                                    <view class="center-item-title">金额</view>
	                                </view>
	                                <view class="card-center-item">
	                                    <view class="center-item-value">{{v.ticketCount}}</view>
	                                    <view class="center-item-title">优惠券</view>
	                                </view>
	                                <view class="card-center-item">
	                                    <view class="center-item-value">{{v.currentCoins}}</view>
	                                    <view class="center-item-title">金币</view>
	                                </view>
	                                <view class="card-center-item">
	                                    <view class="center-item-value">{{v.currentPoint}}</view>
	                                    <view class="center-item-title">积分</view>
	                                </view>
	                            </view>
	                            <view class="card-below' card-below card-below1'">
	                                <view class="card-bellow-item" @click="toRecords">交易明细</view>
	                            </view>
	                        </view>
	                    </swiper-item>
	                </swiper>
					<view class="sug-people">
						<view class="sug-people-left"  @click="tableShow = true">
							<view class="">
								房台号:{{storeTableInfo.name}}
							</view>
						<!-- 	 <u--input
                        style="width: 150rpx;background: #fff;"
							    placeholder="请选择房台"
							    border="surround"
							    v-model="selected.roomName"
							   
							  ></u--input> -->
						</view>
						<view class="sug-people-right">
							<view class="sug-people-title">
								推荐人：
							</view>
							        <cus-selects   :data="tjrList" :size="160" :filterable='true' :searchType='1' v-model="tjrvalue" @change='tjrchange' :clearable='true' ></cus-selects>
						</view>
						
						
					</view>
	                <view class="centerStore-container-h2">
	                    <view class="container-h2-item">储值方案</view>
	                </view>
	                <view class="centerStore-container-programme_all">
	                    <view :class="'centerStore-container-programme ' + (current == k ? 'selected' : '')" @click="selectPro(k)" :id="k" v-for="(v, k) in programme" :key="k">
	                        <view class="programme-upper">
	                            <view class="programme-upper-left-qnjq" v-if="themetype == '001'"></view>
	                            <view class="programme-upper-left" v-if="themetype == '002'"></view>
	                            <view class="programme-upper-right">
	                                <view class="upper-right-title">{{ v.Name }}</view>
	                                <view class="upper-right-value" v-if="v.schemelist[0] && v.Subtitle">
	                                    <view>{{ v.Subtitle }}</view>
	                                </view>
	                            </view>
	                        </view>
	
	                      <!--  <view class="programme-below" v-if="current != k">
	                       
	                            <van-radio-group :value="SchemeGroup" catch:tap @change.stop.prevent="onChange" direction="horizontal">
	                                <van-radio :name="s.SchemeGroup" use-icon-slot v-for="(s, m) in v.schemelist" :key="m">
	                                    <view class="radio-label" style="color: red;">{{ s.Name }}</view>
	
	                                    <image slot="icon" :src="SchemeGroup == s.SchemeGroup ? iconS.active : iconS.normal" class="radio-img" />
	                                </van-radio>
	                            </van-radio-group>
	                        </view> -->
						  <view class="programme-below" v-if="current == k" @click.stop="">
						    <van-radio-group v-model="SchemeGroup" @change="onChange" direction="horizontal">
						       <van-radio 
						         v-for="(s, m) in v.schemelist" 
						         :key="m" 
						         :name="s.SchemeGroup" 
						         use-icon-slot
								  direction="horizontal"
								 :disabled="s.PresentType !== '2'"
						       >
						       <view class="programme-below-rec">
						       	<image
						       	  slot="icon" 
						       	:src="SchemeGroup == s.SchemeGroup ? iconS.active : s.PresentType !== '2'  ? iconS.disabled : iconS.normal" 
						       	  class="radio-img" 
						       	/> 
							
						       	<!-- <view class="radio-label">{{ s.Name }}</view> -->
								 <view class="radio-label">
								      <!-- 根据s.Name中的+分割字符串 -->
								      <span v-for="(part, index) in splitName(s.Name)" :key="index">
								        {{ part }}
								        <!-- 如果不是最后一部分，插入换行符 -->
								        <span v-if="index < splitName(s.Name).length - 1" class="line-break"></span>
								      </span>
								</view>
						       </view>
						       </van-radio>
						     </van-radio-group>
						
						   </view>
					
	                    </view>
	                    <view class="programme-showMore" @click="isOpenToggle">
	                        {{ isOpen ? '收起更多方案' : '展开更多方案' }}
	                        <view :class="'showMore-icon ' + (isOpen ? 'showALL' : '')"></view>
	                    </view>
	                </view>
	                <view class="centerStore-container-button" @click="doConfirmPay">
	                    <view class="container-button-item">确认储值</view>
	                </view>
	                <view class="centerStore-container-read">
						    <image
							@click="radioChange"
						      :src="radio ? iconS.active : iconS.normal"
						      class="radio-icon"
						    />
					
	                    <view class="container-read-center">我已阅读并同意</view>
	                    <!-- <view class="container-read-right" @click="memberWeb"></view> -->
						<a class="container-read-right" href="https://oss.jtmckj.com/mb/public/privacy/privacy-news.html">《会员储值协议》</a>
	                </view>
	            </view>
	     
	        </ls-page>
			<x-popup :show="tableShow" position="bottom" @close="tableShow = false" :closeOnClickOverlay="true" @update:show="tableShow = $event">
				<view class="popup-container">
					<view class="popup-container-header">
						<view class="header-left" @click="tableShow = false">取消</view>
						<view class="header-center">选择桌号</view>
						<view class="header-right" @click="tableConfirm">确认</view>
					</view>
					<!-- 选择区域 -->
					<view class="popup-container-main">
						<van-col span="6" class="main-item" v-for="(item, index) in list" :key="index">
							<view class="main-item-one" :class="{
								          'selected': currentArea === index, 
								          'unselected': currentArea !== index
								        }" @click="selectArea(index)">
								{{ item.areaName }}
							</view>
						</van-col>
					</view>
					<!-- 选择桌号 -->
					<view class="popup-container-footer" v-if="currentArea !== null">
						<view class="footer-item" @click="selectTable(index)"
							v-for="(table, index) in list[currentArea].children" :key="index" :class="{
							      'selected': currentTable === index, 
							      'unselected': currentTable !== index
							    }">
							{{ table.name }}
						</view>
					</view>
				</view>
			</x-popup>
			
			<pay v-if="payShow" :show="payShow" @update:show="payShow = $event" @finishPay="confirmPay($event)" payto="store" :info="payForm" />
			
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { useRoute } from 'vue-router';
	import {
		HFiveMemberAppObjProcess 
	} from '@/api/public.js'
	import wx from "weixin-js-sdk";
	import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue' //https://ext.dcloud.net.cn/plugin?id=12451

   

	// 定义响应式变量
	const themetype = uni.getStorageSync('themeInfo')?.type 
	const SchemeCode = ref('');
	const SchemeGroup = ref('');
	const Index = ref('0'); // 当前卡的index
	const cardList = ref([]);
	const cardInfo = ref('')
	const programme1 = ref([]);
	const programme = ref([]);
	const current = ref('-1'); // 选中的元素
	const radio = ref(false);
	const isOpen = ref(false); // 是否展开
	const icon = ref({
	  normal: 'https://oss.jtmckj.com/wmp/images/center/my/i_radio_normal.png',
	  active: themetype == '001' ? 'https://oss.jtmckj.com/h5-uniapp/qnig/my/i_radio_choose.png' : 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_choose.png'
	});
	
	const iconS = ref({
	  normal: 'https://oss.jtmckj.com/wmp/images/center/my/i_radio_normal.png',
	  active: themetype == '001' ? 'https://oss.jtmckj.com/h5-uniapp/qnig/my/i_radio_choose.png' : 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_choose.png',
	  disabled:'https://oss.jtmckj.com/wmp/kbq/common/disabled.png'
	});
	
	const address = ref(uni.getStorageSync('shopInfo').orgName);
	const mobile = ref('');
	const active = ref(0); // 储值方案默认选择的子方案
	const timeInt = ref('');
	const toGameShow = ref(false); // 跳转游戏
	
	// 设置返回函数
	const backFn = () => {
	  uni.navigateBack();
	};
	const splitName = (name) => {
	  return name.split('+');  // 根据 + 分割字符串
	};
	

	
	// 页面初始化
	const initData = async () => {
		const storageRes =  uni.getStorageSync('isAgreeProtocol');
		radio.value = storageRes;
	  
	
	  // 获取会员信息
	  mobile.value = uni.getStorageSync('userInfo').mobile

	  const res = await HFiveMemberAppObjProcess({ functionName: 'MemberInfo_H5', contentData: { code: mobile.value }});
	
	  cardList.value = res
	  getProgramme(res[0])
	 
	};
	initData()
	// // 会员协议跳转
	// const MembeAgreement = () => {
	//   navigateTo({
	//     url: '/pages/web/web?link=https://oss.jtmckj.com/mb/public/privacy/privacy-news.html'
	//   })
	// }
	
	// radio 切换
	const radioChange = () => {
	  radio.value = !radio.value
	  uni.setStorageSync('isAgreeProtocol',radio.value )
	}
	
	// 跳转到交易记录页面
	const toRecords = () => {
		uni.setStorageSync('cardInfo',cardList.value[Index.value] )
		uni.navigateTo({
			url:'/subpkg/view/transRecords/transRecords'
		})
	}
	
	// 选择储值方案
	const selectPro = (e) => {
	  const selectedId = e
	  current.value = selectedId
	  SchemeCode.value = programme.value[selectedId].SchemeCode
	  SchemeGroup.value = programme.value[selectedId].schemelist[0].SchemeGroup
	}
	
	// 收起、展开更多方案
	const isOpenToggle = () => {
	  isOpen.value = !isOpen.value
	  if (isOpen.value) {
	    programme.value = programme1.value
	  } else {
	    programme.value = programme1.value.slice(0, 3)
	    if (current.value > 2) {
	      current.value = '0'
	    }
	  }
	}
	// 选择储值方案的子方案
	const onChange = (e)=> {
		  SchemeGroup.value = e
	}
	
	// // 获取储值方案
	const getProgramme = async(cardInfo)=> {
	  let contentData = {
	    typeCode: cardInfo.cardType
	  }
	  if (cardInfo.cardType === 1) {
	    contentData.brandCode = cardInfo.brandCode
	  } else {
	    contentData.brandCode = ''
	  }
	  try {
	  	const res = await HFiveMemberAppObjProcess({
	  	  functionName: "GetNewSchemeList_H5",
	  	  contentData
	  	})
		let arr = []
		if(IsScanRecharge.value){
			 arr = res.filter(item => item.IsScanRecharge == true)
				console.log(arr);
		}else{
			arr = res.filter(item => item.IsScanRecharge == false)
		}
		
		arr?.map(item => {
		// 对 schemelist 进行排序
		item.schemelist.sort((a, b) => {
			return b.PresentType === '2' ? 1 : a.PresentType === '2' ? -1 : 0;
		 });
		});
		
	  	programme1.value = arr
	  	programme.value = arr.slice(0, 3) // 只取前三个方案
		console.log(JSON.stringify(arr),'arr:')
	  } catch (error) {
	  	programme1.value = []
	  	programme.value = []
	  }
	    
	 
	}
	// 切换卡片时重新获取方案
	const cardChange = (e)=> {
		console.log(e);
	  SchemeCode.value = '' // 清空选中的方案
	  Index.value = e.detail.current
	  getProgramme(cardList.value[Index.value])
	}
	
	const payShow = ref(false)
	const payForm = ref({})
	// 确认支付
	const doConfirmPay = async()=> {
	  // showLoading({ title: "加载中", mask: true })
	  
	
	    if (!radio.value) {
			uni.showToast({
				title: '请先勾选我已阅读并同意',
				icon: 'none'
			})
	      return
	    }
	
	    if (current.value < 0) {
			uni.showToast({
				title: '请先选择储值方案',
				icon: 'none'
			})
	      return
	    }
		if(cardList.value[Index.value]?.isBlockRecharge == "1") {
			 uni.showToast({
			 	title: '您在黑名单中无法充值',
			 	icon: 'none'
			 })
			 return
		}
		const schemeCode = SchemeCode.value
		const schemeGroup = SchemeGroup.value
		payForm.value = {
			schemeCode,
			schemeGroup,
			otherCode:'',
			memberCode:cardList.value[Index.value].code,
			referRoomCode:storeTableInfo.value.code,
			referRoomName:storeTableInfo.value.name,
			referMan:tempreferMan.value
		}
		console.log(payForm.value,'payForm.value')
		payShow.value = true
	}
	// 支付
	const confirmPay = async(e)=>{
		console.log(e);
		if(e){
			payShow.value = false
			
			// 刷新信息
			mobile.value = uni.getStorageSync('userInfo').mobile
			const res = await HFiveMemberAppObjProcess({ functionName: 'MemberInfo_H5', contentData: { code: mobile.value }});
			cardList.value = res
		}
		
		
	}
	const IsScanRecharge = ref(false)
	
	const tjrList = ref([])
	const tjrvalue = ref(null)
	const tempreferMan = ref('')
    const tjrchange =(e)=> {
		 console.log(e) //这里返回的是value值
		 tempreferMan.value = e
	}
	
	const RooNamevalue = ref('')
	const tableShow = ref(false);
	const GetOrgGroup_H5_Optios = ()=> {
		       HFiveMemberAppObjProcess({ functionName: 'GetOrgGroup_H5', contentData: { }})
		       .then(res=>{
		       	 res.data.forEach(item => {
		       			  item.children.forEach(child => {
		       				tjrList.value.push({
		       				  ...child, 
		       				  title: child.label
		       				});
		       			  });
		       			});
		       	console.log(tjrList,'allChildren')
		       })	
	}
	
	// ---------------------------------------------------------获取桌台列表----------------------------------------------------------
	const getRoomTable = () => {
		HFiveMemberAppObjProcess({ "functionName": "GetRoomOpWine_H5", "contentData": { "consumeState": "" } })
			.then(res => {
				list.value = res
				console.log(list.value, 'ist.value');
			})
	}
	
	const list = ref([]);
	// const current = ref(0);
	const currentTable = ref(0);
	const selectedTable = ref({})
	//当前选中的区域索引
	const currentArea = ref(0);
	
	// 显示桌台选择
	const pickTable = () => {
		tableShow.value = true;
	};
	
	// 关闭桌台选择
	const closeTable = () => {
		tableShow.value = false;
	};
	
	// 选择桌台
	const selectTab = (e) => {
		if (e.target.value) {
			currentTable.value = e.target.value;
		}
	};
	
	// 选择区域
	const selectArea = (index) => {
		currentArea.value = index;
		currentTable.value = 0;
	};
	
	// 选择桌台
	const selectTable = (index) => {
		currentTable.value = index;
	};
	
	// ---------------------------------------------------------桌台确认----------------------------------------------------------
	const selected = ref({
		roomCode:'',
		roomName:''
	})
	
	const tableConfirm = () => {
		if (currentArea.value !== null && currentTable.value !== null) {
			const selectedArea = list.value[currentArea.value];
			selectedTable.value = selectedArea.children[currentTable.value];
			console.log('选中的区域:', selectedArea.areaName);
			console.log('选中的桌台:', selectedTable.value.name);
			console.log('桌台编码:', selectedTable.value.code);
			selected.value.roomCode = selectedTable.value.code
			selected.value.roomName= selectedTable.value.name
			
			payForm.value.referRoomCode = selectedTable.value.roomCode
			payForm.value.referRoomName = selectedTable.value.name
			
			tableShow.value = false
			// 你可以根据需要在这里执行进一步的操作，比如传递数据或显示提示
		} else {
			console.log('请选择区域和桌台');
		}
	}
	
	
	onLoad((option) => {
		if(option && option.IsScanRecharge){
			IsScanRecharge.value = option.IsScanRecharge
		}
        GetOrgGroup_H5_Optios()
		// getRoomTable()
	})
	
	
	const storeTableInfo = ref('')
	onShow(async() => {
	  storeTableInfo.value  = uni.getStorageSync('tableInfo') || {} // 获取本地数据
	  console.log('页面显示')
	  if(uni.getStorageSync('aliPayFinish')){
		  uni.removeStorageSync('aliPayFinish')
		  uni.showToast({
		  	title: '储值完成',
		  	icon: 'none'
		  })
		  payShow.value = false
	  }
	  // 刷新信息
	  mobile.value = uni.getStorageSync('userInfo').mobile
	  const res = await HFiveMemberAppObjProcess({ functionName: 'MemberInfo_H5', contentData: { code: mobile.value }});
	  cardList.value = res
	  console.log(cardList.value);
	})



	
</script>

<style lang="scss" scoped>
	.uni-px-5{
		width: 250rpx;
	}
	.sug-people{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		.sug-people-left{
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.sug-people-right{
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		
		.sug-people-title{
			font-family: PingFang SC;
			font-size: 26rpx;
			color: #212121;
			line-height: 32rpx;
		}
		.sug-people-contain{
			padding-right: 20rpx;
			::v-deep{
				.uni-stat-box{
					width: 200rpx;
				}
			}
		}
	}
	.centerStore-container {
	    width: 100%;
	    height: 100%;
	    overflow: scroll;
	    box-sizing: border-box;
	    /* padding: 0 24rpx;*/
	    .centerStore-container-h1 {
	        font-family: PingFang SC;
	        font-weight: 500;
	        font-size: 28rpx;
	        color: var(--maincolorf1);
	        line-height: 28rpx;
	        padding: 33rpx 18rpx 0 27rpx;
	        position: relative;
	        margin: 0 24rpx;
	
	        /* padding-bottom: 54rpx;*/
	        &::before {
	            content: '';
	            position: absolute;
	            top: 37rpx;
	            left: 2rpx;
	            width: 20rpx;
	            height: 20rpx;
	            background-image: url('https://oss.jtmckj.com/wmp/kbq/common/i_icon_address.png');
	            background-size: cover;
	            background-repeat: no-repeat;
	        }
	    }
		.centerStore-container-hadd2 {
		    font-family: PingFang SC;
		    font-weight: 500;
		    font-size: 28rpx;
		    color: var(--maincolorf1);
		    line-height: 28rpx;
		    padding: 33rpx 18rpx 0 27rpx;
		    position: relative;
		    margin: 0 24rpx;
			
		    /* padding-bottom: 54rpx;*/
		    &::before {
		        content: '';
		        position: absolute;
		        top: 37rpx;
		        left: 2rpx;
		        width: 16rpx;
		        height: 20rpx;
		        background-image: url('https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_icon_address.png');
		        background-size: cover;
		        background-repeat: no-repeat;
		    }
		}
	    .center-text {
	        width: 490rpx;
	        font-family: PingFang SC;
	        font-weight: 500;
	        font-size: 28rpx;
	        color: var(--maincolorf2);
	        line-height: 28rpx;
	        position: relative;
	        border-right: 2rpx solid var(--maincolorbd);
	        z-index: 10;
	        padding: 33rpx 18rpx 0 0rpx;
	        display: flex;
	        align-items: center;
	
	        .center-text-icon {
	            width: 16rpx;
	            height: 20rpx;
	        }
	        .orgAddress-text {
	            margin-left: 16rpx;
	            width: 100%;
	            flex: 1;
	        }
	    }
	    .cardBg {
	        background-size: cover;
	        background-repeat: no-repeat;
	    }
	    .cardBg1 {
	        background-size: cover;
	        background-repeat: no-repeat;
	    }
	    .centerStore-container-card {
	        width: 702rpx;
	        height: 320rpx;
	        margin: 0 0rpx 0 12rpx;
	        // margin-top: 62rpx;
	        border-radius: 16rpx;
	        position: relative;
	        margin-bottom: 20rpx;
	        background-repeat: no-repeat;
	        background-size: cover;
	        background-position: center;
	        &.spe {
	            margin: 0 0 0 4rpx;
	        }
	        .card-upper {
	            display: flex;
	            padding-bottom: 76rpx;
	            .card-uppe-item {
	                background: var(--dt-backcolorPink);
	                border-radius: 14rpx 0rpx 30rpx 0rpx;
	                font-family: PingFang SC;
	                font-weight: bold;
	                font-size: 30rpx;
	                color: var(--maincolor);
	                line-height: 36rpx;
	                font-style: italic;
	                padding: 13rpx 20rpx 13rpx 20rpx;
	                max-width: 320rpx;
	                white-space: nowrap; /* 不换行 */
	                overflow: hidden; /* 溢出部分隐藏 */
	                text-overflow: ellipsis; /* 超出部分显示省略号 */
	            }
	        }
	        .card-img {
	            position: absolute;
	            z-index: 999 !important;
	            right: 80rpx;
	            bottom: 106rpx;
	            width: 170rpx;
	            height: 258rpx;
	            background-image: url('https://oss.jtmckj.com/wmp/images/center/centerStore/i_icon_v.png');
	            background-size: cover;
	            background-repeat: no-repeat;
	        }
	        .card-img1 {
	            position: absolute;
	            z-index: 999 !important;
	            right: 80rpx;
	            bottom: 106rpx;
	            width: 170rpx;
	            height: 258rpx;
	            background-image: url('https://oss.jtmckj.com/wmp/images/center/centerStore/i_icon_v2.png');
	            background-size: cover;
	            background-repeat: no-repeat;
	        }
	        .card-center {
	            padding: 24rpx 0rpx;
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            .card-center-item {
	                text-align: center;
	                flex-basis: 25%;
	                z-index: 999;
	                .center-item-value {
	                    font-family: PingFang SC;
	                    font-weight: bold;
	                    font-size: 32rpx;
	                    color: var(--maincolor);
	                    line-height: 32rpx;
	                    padding-bottom: 16rpx;
	                }
	                .center-item-title {
	                    font-family: PingFang SC;
	                    font-weight: 500;
	                    font-size: 26rpx;
	                    color: var(--maincolorf4);
	                    line-height: 26rpx;
	                    /* border-right: 1px solid #FFAA99;*/
	                }
	            }
	            .card-center-item:last-child {
	                .center-item-title {
	                    border-right: 0;
	                }
	            }
	        }
	        .card-below {
	            /* background: #212121;*/
	            border-radius: 0rpx 0rpx 16rpx 16rpx;
	            display: flex;
	            justify-content: flex-end;
	            .card-bellow-item {
	                font-family: PingFang SC;
	                font-weight: 500;
	                font-size: 24rpx;
	                color: var(--maincolor);
	                line-height: 24rpx;
	                padding: 18rpx 40rpx 18rpx 27rpx;
	                position: relative;
	                border-radius: 24px 0px 0px 24px;
	                &::before {
	                    content: '';
	                    position: absolute;
	                    top: 20rpx;
	                    right: 22rpx;
	                    width: 11rpx;
	                    height: 18rpx;
	                    background-image: url('https://oss.jtmckj.com/wmp/images/common/i_triangle_right.png');
	                    background-size: cover;
	                    background-repeat: no-repeat;
	                }
	            }
	        }
	        .card-below1 {
	            /*   background: #212121;*/
	        }
	    }
	    .centerStore-container-h2 {
	        padding: 40rpx 0;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        background-image: url('https://oss.jtmckj.com/wmp/qnjg/common/i_title.png');
	        background-size: 320rpx 22rpx;
	        background-repeat: no-repeat;
	        background-position: 50% center;
	        margin: 0 24rpx;
	        .container-h2-item {
	            text-align: center;
	            font-family: PingFang SC;
	            font-weight: bold;
	            font-size: 36rpx;
	            color: var(--maincolorf1);
	            line-height: 36rpx;
	        }
	    }
	    .centerStore-container-programme_all {
	        margin: 0 24rpx;
	        .centerStore-container-programme {
	            background: var(--maincolor);
	            border-radius: 16rpx;
	            /* border-image: radial-gradient(circle, #333333, #99948A) 1 1;*/
	            padding: 32rpx 32rpx 0 32rpx;
	            margin-bottom: 20rpx;
	            padding-bottom: 32rpx;
	            &.selected {
	                border: 1px solid var(--dt-bordercolorPink);
	                padding-bottom: 0rpx;
	            }
	            .programme-upper {
	                display: flex;
	                align-items: center;
	                .programme-upper-left {
	                    margin-right: 24rpx;
	                    width: 80rpx;
	                    height: 80rpx;
	                    background-image: url('https://oss.jtmckj.com/wmp/kbq/store/i_icon_pro.png');
	                    background-size: 100% 100%;
	                    background-repeat: no-repeat;
	                }
					.programme-upper-left-qnjq {
					    margin-right: 24rpx;
					    width: 80rpx;
					    height: 80rpx;
					    background-image: url('https://oss.jtmckj.com/h5-uniapp/qnig/booktable/cu-icon.png');
					    background-size: 100% 100%;
					    background-repeat: no-repeat;
					}
	                .programme-upper-right {
	                    .upper-right-title {
	                        font-family: PingFang SC;
	                        font-weight: 500;
	                        font-size: 36rpx;
	                        color: var(--maincolorf1);
	                        line-height: 36rpx;
	                        font-weight: bold;
	                    }
	                    .upper-right-value {
	                        padding-top: 21rpx;
	                        font-family: PingFang SC;
	                        font-weight: 500;
	                        font-size: 28rpx;
	                        color: var(--maincolorf4);
	                        line-height: 28rpx;
	                        padding-bottom: 10rpx;
	                        .active {
	                            color: var(--maincolorf1);
	                        }
	                    }
	                }
	            }
	            .programme-below {
					background: var(--mainbaccolor10);
	                border-radius: 8px;
	                margin: 24rpx 0;
					.programme-below-rec{
						display: flex;
						align-items: center;
						background: var(--mainbaccolor);
						margin-bottom: 20rpx;
						border-radius: 16rpx;
						padding: 24rpx 24rpx 16rpx 24rpx;
						
						// border-bottom: 2rpx solid var(--dt-bordercolorPink);
					}
	                .radio-label {
						margin-left: 15rpx;
	                    line-height: 42rpx;
						font-size: 28rpx;
	                    // padding-bottom: 10rpx;
	                }
					.line-break {
					  display: block; /* 使用block使得内容换行 */
					  height: 0; /* 设置高度为0，避免影响布局 */
					}
					::v-deep{
						.van-radio__label{
							margin: 0;
							width: 100%;
						}
						.van-radio{
							width: 100%;
						}
					}
	                .programme-below-item {
	                    font-family: PingFang SC;
	                    font-weight: 500;
	                    font-size: 28rpx;
	                    color: var(--maincolorf2);
	                    line-height: 28rpx;
	                    position: relative;
	                    padding-left: 25rpx;
	                    &::before {
	                        content: '';
	                        position: absolute;
	                        top: 10rpx;
	                        left: 0;
	                        width: 8rpx;
	                        height: 8rpx;
	                        background: var(--mainbaccolor23);
	                        border-radius: 50%;
	                    }
	                }
	
	                .radio-img {
	                    width: 32rpx;
	                    height: 32rpx;
						min-width: 32rpx;
	                }
	                .van-radio--horizontal {
	                    margin-right: 0;
	                }
	                .van-radio__label {
	                    font-family: PingFang SC;
	                    font-weight: 500;
	                    font-size: 32rpx;
	                    color: var(--maincolorf2) !important;
	                    line-height: 32rpx !important;
	                    padding-left: 12rpx;
	                }
	                .right-icon {
	                    margin-left: 16rpx;
	                    width: 12rpx;
	                    height: 22rpx;
	                    background-image: url('https://oss.jtmckj.com/wmp/images/common/i_triangle_right.png');
	                    background-size: 100% 100%;
	                    background-repeat: no-repeat;
	                }
	            }
	        }
	        .programme-showMore {
	            text-align: center;
	            font-family: PingFang SC;
	            font-weight: 500;
	            font-size: 24rpx;
	            color: var(--maincolorf2);
	            position: relative;
	            line-height: 24rpx;
	            padding-bottom: 27rpx;
	            padding-top: 13rpx;
	            .showMore-icon {
	                position: absolute;
	                top: 18rpx;
	                right: 258rpx;
	                width: 18rpx;
	                height: 11rpx;
	                background-image: url('https://oss.jtmckj.com/wmp/images/common/i_triangle_bottom.png');
	                background-size: cover;
	                background-repeat: no-repeat;
	                &.showALL {
	                    transform: rotate(180deg);
	                }
	            }
	        }
	    }
	    .centerStore-container-button {
	        padding-bottom: 28rpx;
	        margin: 0 24rpx;
	        .container-button-item {
	            text-align: center;
	            background: var(--dt-backcolorPink);
	            border-radius: 40rpx;
	            font-family: PingFang SC;
	            font-weight: 500;
	            font-size: 32rpx;
	            color: var(--maincolor);
	            line-height: 32rpx;
	            padding: 25rpx 0;
	        }
	    }
	    .centerStore-container-read {
	        display: flex;
	        align-items: center;
	        padding-bottom: 24rpx;
	        margin: 0 24rpx;
	        .container-read-left {
	            /* width: 32rpx;*/
	            /* height: 32rpx;*/
	            /* background-image: url("https://oss.jtmckj.com/wmp/qnjg/common/i_icon_radio.png");*/
	            /* background-size: cover;*/
	            /* background-repeat: no-repeat;*/
	        }
	        .van-radio__label--right {
	            padding-left: 12rpx !important;
	        }
	        .radio-icon {
	            width: 32rpx;
	            height: 32rpx;
				margin-right: 12rpx;
	        }
	        .container-read-center {
	            font-family: PingFang SC;
	            font-weight: 500;
	            font-size: 24rpx;
	            color: var(--maincolorf2);
	            line-height: 24rpx;
	        }
	        .container-read-right {
	            font-family: PingFang SC;
	            font-weight: 500;
	            font-size: 24rpx;
	            color: var(--dt-colorPink);
	            line-height: 24rpx;
	        }
	    }
	}
	
	.top-meng {
	    position: absolute;
	    width: 100%;
	    height: 480rpx;
	    top: 0;
	    background: linear-gradient(0deg, var(--mainbaccolor), var(--mainbaccolor1));
	    z-index: -1;
	}
	
	.popup-container {
		padding-bottom: 40rpx;
		background: var(--maincolor);
	
		.popup-container-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 33rpx 60rpx 32rpx;
			border-bottom: 1rpx solid var(--maincolorbd);
	
			.header-left {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolor);
				line-height: 32rpx;
				padding: 33rpx 60rpx 32rpx;
			}
	
			.header-center {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: var(--maincolorf1);
				line-height: 36rpx;
			}
	
			.header-right {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolorf1);
				line-height: 32rpx;
				padding: 33rpx 60rpx 32rpx;
			}
		}
	
		.popup-container-main {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
	
			.main-item {
				border-radius: 8rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolorf1);
				line-height: 80rpx;
				text-align: center;
	
				.main-item-one {
					background:var(--mainbaccolor5);
					border-radius: 8rpx;
					margin-right: 10rpx;
				}
			}
	
			.van-col {
				margin-bottom: 20rpx;
			}
	
		}
	
		.popup-container-footer {
			background: var(--mainbaccolor);
			border-radius: 16rpx;
			padding: 10rpx 0rpx 4rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
	
			.footer-item {
				width: 118rpx;
				height: 60rpx;
				background: var(--mainbaccolor5);
				border-radius: 8rpx;
				text-align: center;
				margin-bottom: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--maincolor);
				line-height: 60rpx;
				margin-right: 14rpx;
				white-space: nowrap;
			}
		}
	}
	
	.selected {
		color: var(--maincolor);
		// background: var(--maincolorf1) !important;
	}
	
	.unselected {
		color: var(--maincolorf1) !important;
		background: var(--mainbaccolor5) !important;
	}
	
	::v-deep .van-radio__icon {
		display: none;
	}
	::v-deep .select_wrap {
		width: 150rpx;
	}
	::v-deep .van-radio__label--disabled {
		color:#212121 !important;
	}
</style>